<template>
  <div>
    <van-notice-bar mode="closeable" left-icon="volume-o" :text="noticeText" :color="noticeColor" :backgroundColor="noticeBackgroundColor"></van-notice-bar>
    <van-cell-group>
      <van-cell icon="edit" :title="container.containerNames" :value="container.status" :label="container.created"></van-cell>
      <van-cell icon="notes-o" :title="container.command"></van-cell>
      <van-cell icon="points" :title="container.imageName"></van-cell>
      <van-cell icon="description" :title="container.rootSize + ' MB'"></van-cell>
      <van-cell icon="records" :title="container.rwSize + ' MB'" v-if="container.rwSize !== undefined"></van-cell>
    </van-cell-group>
    <van-collapse :value="collapseItemName" @change="change">
      <van-collapse-item icon="exchange" title="端口映射" name="ports">
        <van-row :key="port" v-for="port in container.ports">
          <van-col offset="6" span="4">{{port.publicIP}}</van-col>
          <van-col offset="0" span="3">{{port.publicPort}}</van-col>
          <van-col offset="0" span="2">{{port.privateType}}</van-col>
          <van-col offset="0" span="3">{{port.privatePort}}</van-col>
        </van-row>
      </van-collapse-item>
      <van-collapse-item icon="exchange" title="目录挂载" name="mounts">
        <van-row :key="mount" v-for="mount in container.mounts">
          <van-col offset="2" span="9">{{mount.sourceMount}}</van-col>
          <van-col offset="0" span="9">{{mount.destMount}}</van-col>
        </van-row>
      </van-collapse-item>
    </van-collapse>
    <van-cell-group>
      <van-button type="info" @click="restartContainer" size="small">重启</van-button>
      <van-button type="primary" @click="startContainer" size="small" v-show=false>启动</van-button>
      <van-button type="danger" @click="stopContainer" size="small" v-show="running">停止</van-button>
    </van-cell-group>
    <van-toast id="van-toast"></van-toast>
  </div>
</template>

<script>
  import dockerAPI from '@/api/dockerAPI'
  import dockerStore from '@/pages/docker/dockerStore'
  import Toast from '@/../static/vant-weapp/toast/toast'

  export default {
    name: 'containerDetails',
    data () {
      return {
        container: '',
        noticeText: '',
        noticeColor: '',
        noticeBackgroundColor: '',
        collapseItemName: []
      }
    },
    onShow () {
      var that = this
      that.container = dockerStore.state.container
      if (that.container.state === 'running') {
        that.noticeText = that.container.status
        that.noticeColor = '#07c160'
        that.noticeBackgroundColor = '#fffbe8'
      }
      if (that.container.state === 'exited') {
        that.noticeText = that.container.status
        that.noticeColor = '#ee0a24'
        that.noticeBackgroundColor = '#fffbe8'
      }
    },
    methods: {
      change (e) {
        var that = this
        that.collapseItemName = e.mp.detail
      },
      restartContainer () {
        var that = this
        var dockerServer = dockerStore.state.dockerServer
        var param = {
          url: dockerServer.url,
          secret: dockerServer.secret,
          containerId: that.container.containerId
        }
        dockerAPI.restartContainer(param).then(result => {
          if (result.code === 200) {
            Toast.success({
              message: result.message,
              forbidClick: true
            })
          }
          if (result.code === 500) {
            Toast.fail({
              message: result.message,
              forbidClick: true
            })
          }
          wx.navigateBack()
        })
      },
      startContainer () {
        var that = this
        var dockerServer = dockerStore.state.dockerServer
        var param = {
          url: dockerServer.url,
          secret: dockerServer.secret,
          containerId: that.container.containerId
        }
        dockerAPI.startContainer(param).then(result => {
          if (result.code === 200) {
            Toast.success({
              message: result.message,
              forbidClick: true
            })
          }
          if (result.code === 500) {
            Toast.fail({
              message: result.message,
              forbidClick: true
            })
          }
          wx.navigateBack()
        })
      },
      stopContainer () {
        var that = this
        var dockerServer = dockerStore.state.dockerServer
        var param = {
          url: dockerServer.url,
          secret: dockerServer.secret,
          containerId: that.container.containerId
        }
        dockerAPI.stopContainer(param).then(result => {
          if (result.code === 200) {
            Toast.success({
              message: result.message,
              forbidClick: true
            })
          }
          if (result.code === 500) {
            Toast.fail({
              message: result.message,
              forbidClick: true
            })
          }
          wx.navigateBack()
        })
      }
    }
  }
</script>

<style scoped>
</style>
